<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="管家列表" />
				<view class="content">
					<uv-search inputAlign="left" :showAction="false" :placeholder="placeholderTxt"
						v-model="keyWordVal" @change="onSearchChange"></uv-search>
				</view>
			</template>

			<view class="loop-container" v-for="(item,index) in dataList" :key="item.id">
				<view class="loop-item-box">
					<view class="loop-item-box-text">

						注册时间:{{item.approved_time}}
					</view>
					<view class="loop-item-box-text">
						手机号:{{item.tel}}
					</view>
					<view class="loop-item-box-text">
						真实姓名:{{item.real_name}}
					</view>
					<view class="loop-item-box-text">
						身份证号:{{item.id_card_number}}
					</view>

					<view class="card-box">
						<view>身份证照:</view>
						<view class="card-item-box">
							<image class="full-image" :src="item.card_face" mode="scaleToFill"></image>
						</view>
						<view class="card-item-box">
							<image class="full-image" :src="item.card_bg" mode="scaleToFill"></image>
						</view>

					</view>

					<view class="loop-item-box-text">
						绑定小区:{{item.community?.map(xitem => xitem.community_name).join(', ')}}
					</view>
				</view>
			</view>
		</z-paging>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	
	import {} from '@/api'
	import {
		navigate
	} from '@/util/tools.js';

	import {
		agentbutlerList
	} from '@/api/other.js'
    const dataList = ref([])
	const paging = ref(null)
    const placeholderTxt = ref('请输入小区名称')
    const keyWordVal = ref(null)
	const onSearchChange=()=>{
		paging.value.reload()
	}
	const queryList = (pageNo, pageSize) => {
		agentbutlerList({
			page: pageNo,
			limit: pageSize,
			keywords: keyWordVal.value

		}).then(res => {
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	const init = async () => {

	}
	init()
</script>

<style lang="scss" scoped>
	.root-box {

		.content {
			padding: 30upx;
			box-sizing: border-box;

		}
	}

	.loop-item-box {
		margin-top: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx 20upx 20upx 20upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx #cccccc;
	}

	.num-item {
		font-size: 30upx;
		font-weight: 600;
	}

	.loop-item-box-text {
		margin-top: 10upx;
		font-size: 20upx;
		color: #666;

	}


	.card-box {
		margin-top: 10upx;
		display: flex;
		align-content: flex-start;
		font-size: 20upx;
		color: #666;
	}

	.card-item-box {
		background-color: #efefef;
		border-radius: 12upx;
		overflow: hidden;
		width: 200upx;
		height: 130upx;
		margin-left: 20upx;
	}

	.full-image {
		width: 100%;
		height: 100%;
	}
</style>